<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>wangEditor example</title>
    <style>
    </style>
</head>

<body>
    <p>
        wangEditor 自定义菜单
    </p>
    <div id="div1"></div>

    <script src="../dist/wangEditor.js"></script>
    <script>
        const E = window.wangEditor
        const editor = new E('#div1')

        const { BtnMenu, DropListMenu, PanelMenu, DropList, Panel, Tooltip } = E
        // console.log('BtnMenu', BtnMenu)
        // console.log('DropListMenu', DropListMenu)
        // console.log('PanelMenu', PanelMenu)
        // console.log('DropList', DropList)
        // console.log('Panel', Panel)
        // console.log('Tooltip', Tooltip)

        // 创建 class
        class InsertABCMenu extends BtnMenu {
            constructor(editor) {
                const $elem = E.$(
                    `<div class="w-e-menu">
                        <button>ABC</button>
                    </div>`
                )
                super($elem, editor)
            }
            // 菜单点击事件
            clickHandler() {
                editor.cmd.do('insertHTML', 'ABC')
            }
            // 菜单激活状态
            tryChangeActive() {
                this.active() // 菜单激活
                // this.unActive() // 菜单不激活
            }
        }

        // 注册菜单
        editor.menus.extend('insertABC', InsertABCMenu)

        // 重新配置 editor.config.menus
        editor.config.menus = editor.config.menus.concat('insertABC')

        editor.create()
    </script>
</body>

</html>